<template>
  <div class="app-container">
    <el-form :inline="true" class="form-inline">
      <el-form-item label="用户昵称">
        <el-input v-model="searchInfo.nickname" placeholder="请输入关键字" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input v-model="searchInfo.mobile" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="会员类型">
        <el-select v-model="searchInfo.memberType">
          <el-option label="全部" value=""></el-option>
          <el-option label="体验" value="free"></el-option>
          <el-option label="付费" value="vip"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="content">
      <div class="_list">
        <el-table v-loading.body="listLoading" highlight-current-row :data="dataList" :height="$tools.tableHeight()" style="width: 100%" @selection-change="handleSelectionChange" @sort-change="sortChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="用户id" prop="id"></el-table-column>
          <el-table-column label="用户信息" width="160">
            <template slot-scope="scope">
              <div class="user_info">
                <img :src="scope.row.avatar && scope.row.avatar.indexOf('http') > -1 ? scope.row.avatar : '/static/images/avatar_user.png'" class="thumbnail" />
                <div class="info">{{ scope.row.username }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户账号" prop="mobile" width="120"></el-table-column>

          <el-table-column label="会员类型">
            <template slot-scope="scope">
              {{ scope.row.sysType ? '付费' : '体验' }}
            </template>
          </el-table-column>
          <el-table-column label="会员来源">
            <template slot-scope="scope">
              {{ (scope.row.registerChannel === 1 ? '被邀请' : '') || '--' }}
            </template>
          </el-table-column>
          <el-table-column label="最后购买时间" width="160" align="center">
            <template slot-scope="scope">
              {{ (scope.row.payTime | formatDate)|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="到期" width="160" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="购买记录" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="getPayment(scope.row.id)">查看</el-button>
              <!-- <el-button type="text" @click="arrDelete('2', scope.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <div class="left">
          <el-tooltip class="item" effect="dark" content="批量删除" placement="top">
            <el-button size="small" type="danger" @click="arrDelete('2')">批量删除</el-button>
          </el-tooltip>
        </div>
        <div class="right" v-if="total > 0">
          <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog width="1100px" title="购买记录" :visible.sync="showPayment">
      <el-table :data="payments" max-height="500" highlight-current-row style="width: 100%;">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="订单号" width="240">
          <template slot-scope="scope">{{ scope.row.outTradeNo }}</template>
        </el-table-column>
        <el-table-column label="支付金额" prop="amount">
          <template slot-scope="scope">{{ scope.row.amount / 100 }}</template>
        </el-table-column>
        <el-table-column label="支付方式">
          <template slot-scope="scope">{{ scope.row.payType === 'WX_PAY' ? '微信' : scope.row.payType === 'ALI_PAY' ? '支付宝' : '苹果支付' }}
          </template>
        </el-table-column>
        <el-table-column label="付款时间" width="150">
          <template slot-scope="scope">{{ scope.row.createTime | formatDate }}</template>
        </el-table-column>
        <el-table-column label="到期时间" width="150">
          <template slot-scope="scope">{{ scope.row.expireTime | formatDate }}</template>
        </el-table-column>
        <el-table-column label="购买类型">
          <template slot-scope="scope">
            <span v-if="scope.row.memberType === 'ONE' || scope.row.memberType === 'IOS_ONE'">1年</span>
            <span v-if="scope.row.memberType === 'HARF' || scope.row.memberType === 'IOS_HARF'">半年</span>
            <span v-if="scope.row.memberType === 'QUAR' || scope.row.memberType === 'IOS_QUAR'">3个月</span>
            <span v-if="scope.row.memberType === 'FREE'">3天</span>
            <span v-if="scope.row.memberType === 'IOS_FREE'">7天</span>
          </template>
        </el-table-column>
        <el-table-column label="付款状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.payStatus === 'FAILURE_PAYMENT' || scope.row.payStatus === 'TRADING_HALT' || scope.row.payStatus === 'TIME_OUT_HALF'" type="danger">{{ scope.row.payStatus | payStatus }}</el-tag>
            <el-tag v-else-if="scope.row.payStatus === 'NOT_PAYMENT'" type="info">{{ scope.row.payStatus | payStatus }}
            </el-tag>
            <el-tag v-else>{{ scope.row.payStatus | payStatus }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right; margin-top: 20px;" v-if="paymentsTotal > 0">
        <el-pagination background :page-size="limit" :total="paymentsTotal" :current-page.sync="currentPage" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixinsTable from '@/util/mixins.table';
export default {
  name: 'userVip',
  mixins: [mixinsTable],
  data () {
    return {
      searchInfo: {},
      searchField: 'searchInfo',
      APISERVER: 'getVipList',
      DELETEAPI: 'deleteUser',
      showPayment: false,
      paymentsTotal: 0,
      currentPage: 1,
      payments: [],
      userId: '',
      memberTypeValue: '',
      options: [
        {
          label: 'Android',
          items: [
            {
              text: '1年会员',
              memberType: 'ONE' // 年会员
            },
            {
              text: '6年会员',
              memberType: 'HARF' // 半年会员
            },
            {
              text: '3个月会员',
              memberType: 'QUAR' // 季度会员
            },
            {
              text: '3天会员',
              memberType: 'FREE' // 1元3天体验
            }
          ]
        },
        {
          label: 'Ios',
          items: [
            {
              text: '1年会员',
              memberType: 'IOS_ONE' // 1年会员
            },
            {
              text: '6个月会员',
              memberType: 'IOS_HARF' // 半年会员
            },
            {
              text: '3个月会员',
              memberType: 'IOS_QUAR' // 季度会员
            },
            {
              text: '7天会员',
              memberType: 'IOS_FREE' // 6元7天体验
            }
          ]
        }
      ]
    };
  },
  filters: {
    payStatus (value) {
      const result = {
        NOT_PAYMENT: '未支付',
        PAY_SUCCESS: '支付成功',
        TRADING_HALT: '支付关闭',
        ING_PAYMENT: '支付中',
        FAILURE_PAYMENT: '支付失败',
        TIME_OUT_HALT: '支付超时',
      };
      return result[value];
    }
  },
  created () {
    this.getList();
  },
  methods: {
    filterTag (value, row) {
      return row.tag === value;
    },
    async getPayment (userId) {
      this.userId = userId;
      this.showPayment = true;
      this.payments = [];
      const { code, data } = await this.$API.getPayment({
        userId,
        page: this.currentPage,
        size: this.limit
      });

      if (code === 200) {
        this.payments = data.items;
        this.paymentsTotal = data.totalSize;
      }
    },
    currentPageChange (val) {
      this.currentPage = val;
      this.getPayment(this.userId);
    },
    sortChange ({ prop, order }) {
      console.log(prop, order);
      if (order) {
        this.params[prop] = order === 'ascending' ? 'ASC' : 'DESC';
      } else {
        this.params = {};
      }
      this.getList();
    },
  }
};
</script>

<style lang="less" scoped>
.el-popover {
  padding: 6px;
}
.editArea {
  padding: 3px;
  cursor: pointer;
  &:hover {
    margin: -1px;
    border: 1px dashed #666;
  }
}
</style>
